﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Templates/Home/Home.Master" AutoEventWireup="true" CodeBehind="Color.aspx.cs" Inherits="VIT.Wedding.Components.Product.Color" %>
<%@ Register Assembly="VIT.Web.Controls" Namespace="VIT.Web.Controls" TagPrefix="VIT" %>
<%@ Register Assembly="VIT.Pre" Namespace="VIT.Pre" TagPrefix="cc" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<title>Chọn màu :: Màu lễ cưới - Style lễ cưới - <%=URLRoot %></title>
<meta name="keywords" content="Chọn màu, Màu lễ cưới, Style lễ cưới"/>
<meta name="description" content="Chọn màu :: Màu lễ cưới - Style lễ cưới - <%=URLRoot %>"/>
<meta name="title" content="Chọn màu :: Màu lễ cưới - Style lễ cưới - <%=URLRoot %>"/>

    <script type="text/javascript" src="<%=URLRoot %>Includes/is.join/join-jquery.js"></script>
    <%--<script type="text/javascript" src="<%=URLRoot %>Includes/SlideshowNumber/jquery.wt-rotator.min.js"></script>
    <script type="text/javascript" src="<%=URLRoot %>Includes/SlideshowNumber/preview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../Includes/SlideshowNumber/wt-rotator.css" />--%>
    
    <link rel="stylesheet" type="text/css" href="../../Includes/jshowoff/jshowoff.css" />
    <link rel="stylesheet" type="text/css" href="../../Includes/style-slick/style-slick.css" />

    
    <link rel="stylesheet" type="text/css" href="../../Includes/is.join/style-join.css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="nd" style="display: none;">
        <div class="sell">
            <VIT:Skin ID="SkinEmptyTop" runat="server" SkinName="Empty"></VIT:Skin>
        </div>
    </div>
    <div class="banner2">
        <VIT:Skin runat="server" ID="SkinBannerProduct" SkinName="Empty"></VIT:Skin>
        <VIT:Skin ID="SkinBanner" runat="server" SkinName="SkinSlideShowProduct"></VIT:Skin>
        <div class="cl"></div>
    </div>
    <div class="fr">
        <div class="title-cmlc">
            <%= ColorObj == null ? "Chọn màu lễ cưới" : string.Format("Bạn đang chọn màu {0}", ColorObj.Name) %>
        </div>
        <div class="ct">
            <div class="bgcenter-cmlc">
                <VIT:Skin ID="SkinColor" runat="server" SkinName="Empty"></VIT:Skin>
            </div>
        </div>
    </div>
    <div class="nd_cd"></div>
    <div class="fr">
        <div class="title-join">Bạn có thể CHỌN THEO STYLE dưới đây:</div>
        <div class="ct">
            <div class=" join">
                <script type="text/javascript" src="<%=URLRoot %>Includes/is.join/join-jquery.js"></script>
                <script type="text/javascript">
                    $.fn.infiniteCarousel = function () {

                        function repeat(str, num) {
                            return new Array(num + 1).join(str);
                        }

                        return this.each(function () {
                            var $wrapper = $('> div', this).css('overflow', 'hidden'),
                                $slider = $wrapper.find('> ul'),
                                $items = $slider.find('> li'),
                                $single = $items.filter(':first'),

                                singleWidth = $single.outerWidth(),
                                visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
                                currentPage = 1,
                                pages = Math.ceil($items.length / visible);


                            // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
                            if (($items.length % visible) != 0) {
                                $items = $slider.find('> li');
                            }

                            // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
                            $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
                            $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
                            $items = $slider.find('> li'); // reselect

                            // 3. Set the left position to the first 'real' item
                            $wrapper.scrollLeft(singleWidth * visible);

                            // 4. paging function
                            function gotoPage(page) {
                                var dir = page < currentPage ? -1 : 1,
                                    n = Math.abs(currentPage - page),
                                    left = singleWidth * dir * visible * n;

                                $wrapper.filter(':not(:animated)').animate({
                                    scrollLeft: '+=' + left
                                }, 500, function () {
                                    if (page == 0) {
                                        $wrapper.scrollLeft(singleWidth * visible * pages);
                                        page = pages;
                                    } else if (page > pages) {
                                        $wrapper.scrollLeft(singleWidth * visible);
                                        // reset back to start position
                                        page = 1;
                                    }

                                    currentPage = page;
                                });

                                return false;
                            }

                            $wrapper.after(' <a class="arrow back"></a>  <a class="arrow forward"></a>');

                            // 5. Bind to the forward and back buttons
                            $('a.back', this).click(function () {
                                return gotoPage(currentPage - 1);
                            });

                            $('a.forward', this).click(function () {
                                return gotoPage(currentPage + 1);
                            });

                            // create a public interface to move to a specific page
                            $(this).bind('goto', function (event, page) {
                                gotoPage(page);
                            });
                        });
                    };

                    $(document).ready(function () {
                        $('.infiniteCarousel').infiniteCarousel();
                    });
                </script>
                <div class="infiniteCarousel">
                    <div style="overflow: hidden;" class="wrapper">
                        <ul>
                            <VIT:Skin ID="SkinChooseType" runat="server" SkinName="Empty"></VIT:Skin>
                        </ul>
                    </div>
                    <a class="arrow back"></a>  <a class="arrow forward"></a>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
